<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>		
		<script>
		// ajax的核心是xhr对象
		function ajax (url,method,data,config){
			return new Promise((resolve,reject)=>{
				var xhr = new XMLHttpRequest();
				// 打开
				xhr.open(method,url);
				if(config&&config.headers){
					// 设置请求头
					for(var k in config.headers){
						xhr.setRequestHeader(k,config.headers[k]);
					}
				}
				// 等待状态发生变化
				xhr.onreadystatechange =function(){
					if(xhr.readyState===4){
						// 成功
						if(xhr.status==200){
							resolve(JSON.parse(xhr.responseText));
						}else{
						// 失败
							reject(xhr);
						}
					}
				}
				
				// 发送				
				xhr.send(data);
			})
		}
		// 翻译
		ajax("http://dida100.com/mi/fanyi.php?q=我喜欢你","get")
		.then(res=>{
			console.log(res);
		})
		// 登录
		ajax("http://dida100.com:8888/api/login","post",
		'{"name":"zeng8","password":"zmm123"}',{
			headers:{"Content-Type":"application/json"}
		})
		.then(res=>{
			console.log(res);
		})
		
		 // 同步，异步，post与get，restFul，http请求过程，http响应码
		 // 同步：按顺序从上至下阻塞式执行代码（直男）
		 // 异步：向执行主线程代码，再执行非主线程代码（渣男）
		 // 实现异步：回调函数，事件响应，订阅与发布模式，promsie，sync与await
		 // ajax默认是异步
		 // post 与get:数据大小post没有限制，get2k，post不缓存，get缓存，
		 // post通常用了修改，新增删除，get通常用来获取
		 // restFul一种程序设计规范，通常每个uri都是一个资源可以同get获取，post新增，put修改，delete删除
		 // http请求过程：（在浏览器输入地址发送那些事情）
		 // 01 浏览器通过域名找到ip
		 // 02 建立tcp链接 发送请求体与请求头
		 // 03 服务响应响应题，响应头，
		 // 04 浏览器解析html 生成dom树（下载css，和js）
		 // 05 解析css 生成css树
		 // 06 css树与dom树合成为渲染树，进行渲染（遇到js先执行js）
		 // 响应码？
		 // 1开头准备，2开头成功，3开头重定向，4开头客户端错误，5服务器次错误
		 // 200 成功 201创建成功 307重定向 404 找不到，401没有权限 500服务器错误
		</script>
	</body>
</html>
